<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .header{
        width: 1190px;
        margin: 0 auto;

    }
    .banner{
        position: relative;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    h1{
        text-align: center;
    }
    .box{
        position: absolute;
        left:200px;
        top:200px;
    }
    input{
        height: 30px;
        width:400px;
        border-radius: 10px;
        border: 1px #1fb0ab solid;
    }
    span{
        color: #85bae4;
        font-size: 25px;
    }
    .box-input{
        width: 300px;
        background: url("img/btn.bmp") no-repeat;
        border-radius: 10px;
    }
    .box-input input{
        height: 51px;
        width: 200px;
        opacity: 0.01;
    }
</style>
<body bgcolor="#f5f5dc">
<form action="" name="demo">
    <div class="header banner">
        <div class="fl">
            <img src="img/bg_chs.png" alt="">
        </div>
        <p>
        <h1>注册账号</h1>
        </p>
        <div class="box">
            <p>
                <span>昵称:</span>  <input type="text" pattern="[-\w\u4E00-\u9FA5]{4,10}" required placeholder="请输入昵称" >
                长度4-10符号
            </p>
            <br>
            <p>
                <span>密码:</span>  <input type="password" pattern="[\dA-Za-z]{6,16}" required   placeholder="请输入密码……">
                长度6-16符号
            </p>
            <br>
            <p>
                <span>确认密码:</span>  <input type="password" pattern="[\dA-Za-z]{6,16}" required placeholder="请确认密码……" >
                长度6-16符号
            </p>
            <br>
            <p>
                <span>手机号码:</span>  <input type="text" pattern="1[3578]\d{9}" required placeholder="请输入手机号……" >
                以13|15|18开头
            </p>
            <br>
            <p>
                <span>邮箱:</span>  <input type="email"  required placeholder="请输入邮箱……">
            </p>
            <br>
            <p>
                <span>年龄:</span>  <input type="text" pattern="\d|[1-9]\d|1[0-2]\d" required placeholder="请输入年龄……" >
            </p>
            <br>
            <div class="box-input ">
               <input type="submit" src="img/btn.bmp">

<!--                <input type="image" src="img/btn.bmp">-->
            </div>
            <a href="new.html">作业一</a>
            <a href="index.html">作业二</a>
        </div>

    </div>
</form>

</body>
</html>